<template>
  <div class="m-box">
    <div class="sh-box progress">
      <div class="title-box">
        <img src="~@img/project/icon-0510.png" alt="" />
        <span>项目签约率、开工率、投产率</span>
      </div>
      <div class="progress-flex">
        <div class="line">
          <div class="chart-box">
            <div class="chart-progress" ref="progress1"></div>
          </div>
          <p class="title t-1">项目签约率</p>
          <p class="text"><span class="dot dot-1"></span> 总招引项目数量</p>
          <p class="shu">
            <span class="num">{{ quota.total_project_count }}</span> 个
          </p>
          <p class="text"><span class="dot dot-2"></span> 已签约项目数量</p>
          <p class="shu">
            <span class="num">{{ quota.project_type_count_qy }}</span> 个
          </p>
        </div>
        <div class="line">
          <div class="chart-box">
            <div class="chart-progress" ref="progress2"></div>
          </div>
          <p class="title t-2">项目开工率</p>
          <p class="text"><span class="dot dot-3"></span> 总招引项目数量</p>
          <p class="shu">
            <span class="num">{{ quota.total_project_count }}</span> 个
          </p>
          <p class="text"><span class="dot dot-4"></span> 已开工项目数量</p>
          <p class="shu">
            <span class="num">{{ quota.project_type_count_kg }}</span> 个
          </p>
        </div>
        <div>
          <div class="chart-box">
            <div class="chart-progress" ref="progress3"></div>
          </div>
          <p class="title t-3">项目投产率</p>
          <p class="text"><span class="dot dot-5"></span> 总招引项目数量</p>
          <p class="shu">
            <span class="num">{{ quota.total_project_count }}</span> 个
          </p>
          <p class="text"><span class="dot dot-6"></span> 已投产项目数量</p>
          <p class="shu">
            <span class="num">{{ quota.project_type_count_tc }}</span> 个
          </p>
        </div>
      </div>
    </div>
    <div class="sh-box">
      <div class="title-box">
        <img src="~@img/project/icon-xmjdtj.png" alt="" />
        <span>项目阶段统计</span>
      </div>
      <div class="chart-box-t">
        <div class="chart-other" ref="pie"></div>
      </div>
    </div>
    <div class="sh-box">
      <div class="title-box">
        <img src="~@img/project/icon-qytzetj.png" alt="" />
        <span>项目协议投资额度统计</span>
      </div>
      <div class="chart-box-t">
        <div class="chart-other" ref="bar"></div>
      </div>
    </div>
    <div class="sh-box">
      <div class="title-box">
        <img src="~@img/project/icon-sshyfb.png" alt="" />
        <span>所属行业分布</span>
      </div>
      <div class="chart-box-t">
        <div class="chart-other" ref="industryBar"></div>
      </div>
    </div>
    <div class="sh-box">
      <div class="title-box">
        <img src="~@img/project/icon-ytzetj.png" alt="" />
        <span>月协议投资额统计</span>
      </div>
      <div class="chart-box-t">
        <div class="chart-other" ref="line"></div>
      </div>
    </div>
    <div class="sh-box">
      <div class="title-box">
        <img src="~@img/project/icon-ssqyfbtj.png" alt="" />
        <span>所属来源区域分布统计</span>
      </div>
      <div class="select-box">
        <el-cascader
          class="select-map"
          ref="cascader"
          v-model="areaSelect"
          :options="mapData"
          :props="{ checkStrictly: true, expandTrigger: 'hover' }"
          placeholder="请选择"
          @change="handleChange"
        >
        </el-cascader>
      </div>
      <div class="chart-box-t">
        <div class="chart-other" ref="huan"></div>
      </div>
    </div>
  </div>
</template>
<script>
import { StatisticAnalysis } from "@api/project";
export default {
  data() {
    return {
      progress1: null,
      progress2: null,
      progress3: null,
      pie: null,
      bar: null,
      industryBar: null,
      line: null,
      huan: null,
      mapData: [],
      areaSelect: [""],
      huanData: [],
      quota: {},
    };
  },
  mounted() {
    this.initProgress1();
    this.initProgress2();
    this.initProgress3();
    this.initPie();
    this.initBar();
    this.initIndustryBar();
    this.initLine();
    this.initHuan();
    this.getStatisticAnalysis1();
    this.getStatisticAnalysis2();
    this.getStatisticAnalysis3();
    this.getStatisticAnalysis4();
    this.getStatisticAnalysis5();
    this.getStatisticAnalysis6("");
  },
  methods: {
    async getStatisticAnalysis1() {
      let res = await StatisticAnalysis({
        flag: 1,
        district: "",
      });
      if (res.code && res.code != 0) {
      } else {
        let nameArr = [];
        let valueArr = [];
        res.sort((a, b) => {
          return a.industry_count - b.industry_count;
        });
        res.map((item) => {
          nameArr.push(item.industry_name);
          valueArr.push(item.industry_count);
        });
        this.industryBar.setOption({
          yAxis: [{ data: nameArr }],
          series: [{ data: valueArr }],
        });
      }
    },
    async getStatisticAnalysis2() {
      let res = await StatisticAnalysis({
        flag: 2,
        district: "",
      });
      if (res.code && res.code != 0) {
      } else {
        let newArr = [];
        res.map((item) => {
          if (item.project_type_name == "已招引") {
            newArr[0] = {
              name: item.project_type_name,
              value: item.project_type_count,
            };
          }
          if (item.project_type_name == "已洽谈") {
            newArr[1] = {
              name: item.project_type_name,
              value: item.project_type_count,
            };
          }
          if (item.project_type_name == "已签约") {
            newArr[2] = {
              name: item.project_type_name,
              value: item.project_type_count,
            };
          }
          if (item.project_type_name == "已开工") {
            newArr[3] = {
              name: item.project_type_name,
              value: item.project_type_count,
            };
          }
          if (item.project_type_name == "已投产") {
            newArr[4] = {
              name: item.project_type_name,
              value: item.project_type_count,
            };
          }
        });

        console.log(newArr);
        this.pie.setOption({
          series: [{ data: newArr }],
        });
      }
    },
    async getStatisticAnalysis3() {
      let res = await StatisticAnalysis({
        flag: 3,
        district: "",
      });
      if (res.code && res.code != 0) {
      } else {
        let newArr = [
          res.investment_volume_count1,
          res.investment_volume_count2,
          res.investment_volume_count3,
          res.investment_volume_count4,
          res.investment_volume_count5,
          res.investment_volume_count6,
          res.investment_volume_count7,
          res.investment_volume_count8,
        ];
        this.bar.setOption({
          series: [{ data: newArr }],
        });
      }
    },

    async getStatisticAnalysis4() {
      let res = await StatisticAnalysis({
        flag: 4,
        district: "",
      });
      if (res.code && res.code != 0) {
      } else {
        this.quota = res;
        this.progress1.setOption({
          title: {
            text: res.project_type_rate_qy,
          },
          series: [
            { data: [{ value: res.total_project_count, name: "项目总数" }] },
            {
              data: [
                { value: res.project_type_count_qy, name: "未完成" },
                {
                  value: res.total_project_count - res.project_type_count_qy,
                  name: "已完成",
                },
              ],
            },
          ],
        });

        this.progress2.setOption({
          title: {
            text: res.project_type_rate_kg,
          },
          series: [
            { data: [{ value: res.total_project_count, name: "项目总数" }] },
            {
              data: [
                { value: res.project_type_count_kg, name: "未完成" },
                {
                  value: res.total_project_count - res.project_type_count_kg,
                  name: "已完成",
                },
              ],
            },
          ],
        });
        this.progress3.setOption({
          title: {
            text: res.project_type_rate_tc,
          },
          series: [
            {
              data: [{ value: res.total_project_count, name: "项目总数" }],
            },
            {
              data: [
                { value: res.project_type_count_tc, name: "已完成" },
                {
                  value: res.total_project_count - res.project_type_count_tc,
                  name: "未完成",
                },
              ],
            },
          ],
        });
      }
    },
    async getStatisticAnalysis5() {
      let res = await StatisticAnalysis({
        flag: 5,
        district: "",
      });
      if (res.code && res.code != 0) {
      } else {
        let newArr = [];
        res.map((item) => {
          item.month == "01" ? (newArr[0] = item.money) : 0;
          item.month == "02" ? (newArr[1] = item.money) : 0;
          item.month == "03" ? (newArr[2] = item.money) : 0;
          item.month == "04" ? (newArr[3] = item.money) : 0;
          item.month == "05" ? (newArr[4] = item.money) : 0;
          item.month == "06" ? (newArr[5] = item.money) : 0;
          item.month == "07" ? (newArr[6] = item.money) : 0;
          item.month == "08" ? (newArr[7] = item.money) : 0;
          item.month == "09" ? (newArr[8] = item.money) : 0;
          item.month == "10" ? (newArr[9] = item.money) : 0;
          item.month == "11" ? (newArr[10] = item.money) : 0;
          item.month == "12" ? (newArr[11] = item.money) : 0;
        });
        this.line.setOption({
          series: [{ data: newArr }],
        });
      }
    },
    async getStatisticAnalysis6(district) {
      let res = await StatisticAnalysis({
        flag: 6,
        district: district,
      });
      if (res.code && res.code != 0) {
      } else {
        let newArr = [];
        let matData = [{ label: "全国", value: "" }];
        res.map((item) => {
          if (this.areaSelect[0] == "") {
            matData.push({
              label: item.district,
              value: item.district,
            });
          }
          newArr.push({ name: item.district || item.city, value: item.count });
        });
        if (this.areaSelect[0] == "") {
          this.mapData = matData;
        }
        this.huanData = newArr;
        this.upDataHuan();
      }
    },

    handleChange(val) {
      this.getStatisticAnalysis6(val[0]);
    },
    initProgress1() {
      this.progress1 = this.$echarts.init(this.$refs.progress1);
      let option = {
        color: ["#ffe5d8", "#fe8571"],
        title: {
          top: "center",
          left: "center",
          textStyle: {
            fontSize: 20,
            color: "#FF8175",
            fontWeight: "bold",
            fontFamily: "Microsoft YaHei",
          },
        },
        series: [
          {
            name: "总进度",
            type: "pie",
            center: ["50%", "50%"],
            radius: ["60%", "90%"],
            itemStyle: {
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
            },

            silent: true,
            labelLine: {
              show: false,
            },
          },
          {
            name: "已完成",
            type: "pie",
            center: ["50%", "50%"],
            radius: ["60%", "90%"],
            itemStyle: {
              borderRadius: [0, 100, 0, 100],
            },
            silent: true,
            label: {
              show: false,
              position: "center",
            },
            data: [],
          },
        ],
      };
      this.progress1.setOption(option);
    },
    initProgress2() {
      this.progress2 = this.$echarts.init(this.$refs.progress2);
      let option = {
        color: ["#d8f1ef", "#18c8b7"],
        title: {
          top: "center",
          left: "center",
          textStyle: {
            fontSize: 20,
            color: "#18c8b7",
            fontWeight: "bold",
            fontFamily: "Microsoft YaHei",
          },
        },
        series: [
          {
            name: "总进度",
            type: "pie",
            center: ["50%", "50%"],
            radius: ["60%", "90%"],
            itemStyle: {
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
            },

            silent: true,
            labelLine: {
              show: false,
            },
          },
          {
            name: "已完成",
            type: "pie",
            center: ["50%", "50%"],
            radius: ["60%", "90%"],
            itemStyle: {
              borderRadius: [0, 100, 0, 100],
            },

            silent: true,
            label: {
              show: false,
              position: "center",
            },
          },
        ],
      };
      this.progress2.setOption(option);
    },
    initProgress3() {
      this.progress3 = this.$echarts.init(this.$refs.progress3);
      let option = {
        color: ["#e4f1ff", "#62acff"],
        title: {
          top: "center",
          left: "center",
          textStyle: {
            fontSize: 20,
            color: "#62acff",
            fontWeight: "bold",
            fontFamily: "Microsoft YaHei",
          },
        },
        series: [
          {
            name: "总进度",
            type: "pie",
            center: ["50%", "50%"],
            radius: ["60%", "90%"],
            itemStyle: {
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
            },
            silent: true,
            labelLine: {
              show: false,
            },
          },
          {
            name: "已完成",
            type: "pie",
            center: ["50%", "50%"],
            radius: ["60%", "90%"],
            itemStyle: {
              borderRadius: [0, 100, 0, 100],
            },
            silent: true,
            label: {
              show: false,
              position: "center",
            },
            data: [],
          },
        ],
      };
      this.progress3.setOption(option);
    },
    initPie() {
      this.pie = this.$echarts.init(this.$refs.pie);
      let option = {
        color: ["#fb3878", "#fdbe24", "#3ed8be", "#619bfb", "#8c3def"],
        tooltip: {
          trigger: "item",
          formatter: function(params) {
            return (
              params.marker +
              " " +
              params.name +
              " ： " +
              params.data.value +
              "个"
            );
          },
        },
        legend: {
          show: true,
          bottom: 0,
          itemGap: 20,
        },
        series: [
          {
            type: "pie",
            center: ["50%", "45%"],
            radius: ["45px", "110px"],
            labelLine: {
              show: true,
              length: 20,
              length2: 45,
              smooth: false,
              showAbove: true,
              lineStyle: { cap: "round" },
            },
            label: {
              formatter: "{a|{d}%}\n{hr|}",
              //折线图文字颜色
              rich: {
                //圆点位置大小配置
                hr: {
                  //auto自定义
                  backgroundColor: "inherit",
                  borderRadius: 12,
                  width: 12,
                  height: 12,
                  padding: [-4, -4, 0, -16],
                },
                a: {
                  fontSize: 16,
                  padding: [0, -34, -20, -40],
                },
              },
              color: "#fff",
            },
            zoom: 0.8,
            selectedMode: "single",
          },
        ],
      };
      this.pie.setOption(option);
      this.pie.on("legendselectchanged", function(obj) {
        const { selected, name } = obj;
        selected[name] = true;
        let option = {
          legend: {
            selected: selected,
          },
        };
        this.setOption(option);
        this.dispatchAction({
          type: "legendSelect",
          name: name,
        });
      });
    },
    initBar() {
      this.bar = this.$echarts.init(this.$refs.bar);
      let initOption = {
        color: [
          new this.$echarts.graphic.LinearGradient(1, 1, 0, 0, [
            { offset: 0, color: "#4DA1FF" },
            { offset: 1, color: "#ADD4FF" },
          ]),
        ],
        grid: {
          top: 50,
          left: "8%",
          bottom: "15%",
          right: "2%",
        },
        legend: {
          show: true,
          top: 10,
          right: 0,
          itemWidth: 14,
          itemHeight: 14,
          itemStyle: {
            color: "#8CB7FF",
          },
          textStyle: {
            fontSize: 14,
            color: "#666",
          },
        },
        tooltip: {
          show: "true",
        },
        xAxis: {
          type: "category",
          axisLabel: {
            show: true,
            color: "#999",
            fontSize: 10,
            interval: 0,
          },
          axisLine: {
            lineStyle: {
              color: "#EEF3F8",
              width: 1,
            },
          },
          axisTick: {
            show: false,
          },
          data: [
            "0-0.3亿",
            "0.3-1亿",
            "1-3亿",
            "3-10亿",
            "10-50亿",
            "50-100亿",
            "100-150亿",
            ">150亿",
            // "<0.3亿",
            // " <1亿",
            // " <3亿",
            // " <10亿",
            // "<50亿",
            // "<100亿",
            // "<150亿",
            // ">150亿",
            // "0-100万",
            // ">100万",
            // ">300万",
            // ">500万",
            // ">1000万",
            // ">3000万",
            // ">5000万",
          ],
        },
        yAxis: {
          type: "value",
          axisLabel: {
            show: true,
            color: "#A9B0B9",
            fontSize: 12,
          },
          // interval: 100, //每次增加几个
          axisLine: {
            show: true,
            lineStyle: {
              color: "#EEF3F8",
              width: 1,
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              // 使用深浅的间隔色
              color: "#EEF3F8",
              width: 1,
            },
          },
        },
        series: [
          {
            name: "项目协议投资额(项目：个)",
            type: "bar",
            barWidth: 26, //柱图宽度
            itemStyle: {
              //柱形图圆角，初始化效果
              barBorderRadius: [8, 8, 0, 0],
            },
            // data: [18, 14, 16, 12, 9, 10, 8],
          },
        ],
      };
      this.bar.setOption(initOption);
    },
    initIndustryBar() {
      this.industryBar = this.$echarts.init(this.$refs.industryBar);
      let option = {
        color: ["#4DA1FF"],
        grid: {
          top: 50,
          left: "28%",
          bottom: "15%",
          right: "4%",
        },
        legend: {
          show: true,
          top: 10,
          right: 0,
          itemWidth: 14,
          itemHeight: 14,
          textStyle: {
            fontSize: 14,
            color: "#666",
          },
        },
        tooltip: {
          show: "true",
        },
        xAxis: {
          type: "value",
          axisLabel: {
            show: true,
            color: "#999",
            fontSize: 10,
            interval: 0,
          },
          axisLine: {
            lineStyle: {
              color: "#EEF3F8",
              width: 1,
            },
          },
          axisTick: {
            show: false,
          },
        },
        yAxis: {
          type: "category",
          axisLabel: {
            show: true,
            color: "#999",
            fontSize: 12,
          },
          // interval: 100, //每次增加几个
          axisLine: {
            show: true,
            lineStyle: {
              color: "#EEF3F8",
              width: 1,
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              // 使用深浅的间隔色
              color: "#EEF3F8",
              width: 1,
            },
          },
          // data: [
          //   "新材料",
          //   "新一代电子信息技术",
          //   "绿色能源",
          //   "高端装备制造",
          //   "生产性服务业",
          //   "生活性服务业",
          //   "文化旅游",
          //   "现代农业",
          //   "其他",
          // ].reverse(),
        },
        series: [
          {
            name: "行业(项目：个)",
            type: "bar",
            barWidth: 10, //柱图宽度
            itemStyle: {
              //柱形图圆角，初始化效果
              barBorderRadius: [0, 5, 5, 0],
            },
            // data: [12, 32, 14, 23, 25, 22, 18, 10, 24],
          },
        ],
      };

      this.industryBar.setOption(option);
    },
    initLine() {
      this.line = this.$echarts.init(this.$refs.line);
      let option = {
        color: ["#4DA1FF"],
        grid: {
          top: 50,
          left: "18%",
          bottom: "15%",
          right: "4%",
        },
        legend: {
          show: true,
          top: 10,
          right: 0,
          itemWidth: 14,
          itemHeight: 14,
          textStyle: {
            fontSize: 14,
            color: "#666",
          },
        },
        tooltip: {
          show: "true",
        },
        xAxis: {
          type: "category",
          axisLabel: {
            show: true,
            color: "#999",
            fontSize: 10,
            // interval: 0,
          },
          axisLine: {
            lineStyle: {
              color: "#EEF3F8",
              width: 1,
            },
          },
          axisTick: {
            show: false,
          },
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月",
          ],
        },
        yAxis: {
          type: "value",
          axisLabel: {
            show: true,
            color: "#999",
            fontSize: 12,
          },
          // interval: 100, //每次增加几个
          axisLine: {
            show: true,
            lineStyle: {
              color: "#EEF3F8",
              width: 1,
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              // 使用深浅的间隔色
              color: "#EEF3F8",
              width: 1,
            },
          },
        },
        series: [
          {
            name: "月协议投资额（亿元）",
            type: "line",
            smooth: true,
            itemStyle: {
              color: "#2E5EFA",
            },
            symbolSize: 9,
            areaStyle: {
              color: "rgba(46, 94, 250,.2)",
            },
          },
        ],
      };
      this.line.setOption(option);
    },
    initHuan() {
      this.huan = this.$echarts.init(this.$refs.huan);
      let option = {
        color: [
          "#f18870",
          "#e94520",
          "#1b54a9",
          "#1a76a5",
          "#3ed8be",
          "#34a471",
          "#ff9800",
          "#b2152c",
          "#80abeb",
          "#7bc6ea",
          "#77d5a9",
          "#ffc877",
          "#8c14f0",
          "#f07f90",
          "#2871dd",
          "#3ed8be",
          "#37af78",
          "#0484b1",
          "#eb5230",
          "#ffbd00",
          "#9bbdef",
          "#9bd3ef",
          "#619bfa",
          "#ffd699",
          "#f7b8a9",
          "#2169d3",
          "#de1a37",
          "#028458",
          "#ffff00",
          "#aa6500",
          "#f7860c",
          "#58b6e5",
          "#56ca95",
          "#ffb74c",
        ],
        tooltip: {
          trigger: "item",
          formatter: function(params) {
            return (
              params.marker +
              " " +
              params.name +
              " ： " +
              params.data.value +
              "个"
            );
          },
        },
        series: [
          {
            type: "pie",
            center: ["50%", "60%"],
            radius: [50, 70],
            // labelLine: {
            //   show: false,
            //   length: 4,
            //   length2: 90,
            //   smooth: false,
            //   showAbove: false,
            //   lineStyle: { cap: "round" },
            // },
            label: {
              show: true,
              // position: "center",
              formatter: "{a|{b}} {a|{c}个} {a|{d}%}",
              // formatter: "{a|{b}}\n\n{a|占比:{d}%}",
              //折线图文字颜色
              rich: {
                //圆点位置大小配置
                hr: {
                  //auto自定义
                  backgroundColor: "inherit",
                  borderRadius: 12,
                  width: 12,
                  height: 12,
                  padding: [-4, -4, 0, -16],
                },
                a: {
                  fontSize: 14,
                  // fontWeight: "bold",
                },
              },
              color: "#fff",
            },
            confine: true,
            emphasis: {
              // labelLine: {
              //   show: true,
              // },
              label: {
                show: true,
              },
            },
            select: {
              label: {
                show: true,
              },
            },
            zoom: 0.8,
            selectedMode: "single",
          },
        ],
      };
      this.huan.setOption(option);
      this.huan.on("click", (i) => {
        this.mapData.map((item) => {
          if (item.label == i.name) {
            this.areaSelect = [i.name];
            this.getStatisticAnalysis6(i.name);
          }
        });
      });
    },
    upDataHuan() {
      let options = {
        series: [
          {
            data: this.huanData,
          },
        ],
      };
      this.huan.setOption(options);
    },
  },
};
</script>
<style lang="less" scoped>
.m-box {
  padding: 30px 20px;
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 20px 20px;
}
.sh-box {
  position: relative;
  padding: 20px;
  background: #ffffff;
  box-shadow: 0px 0px 9px 0px rgba(189, 189, 189, 0.67);
  border-radius: 10px;
  text-align: left;
}
.title-box {
  cursor: default;
  img {
    vertical-align: middle;
    margin-right: 10px;
  }
  span {
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #333333;
    vertical-align: middle;
  }
}
.progress {
  .progress-flex {
    display: flex;
    & > div {
      flex: 1;
      position: relative;

      &.line::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 1px;
        height: 100%;
        background: #eeeeee;
      }
    }
  }

  .chart-box {
    width: 100%;
    height: 130px;
  }
  .chart-progress {
    width: 100%;
    height: 100%;
  }
  .title {
    text-align: center;
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    &.t-1 {
      color: #ff8174;
    }
    &.t-2 {
      color: #19cbb5;
    }
    &.t-3 {
      color: #60abff;
    }
  }
  p.text {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #999999;
  }
  p.shu {
    margin-top: 4px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #666666;
  }
  .dot {
    margin: 20px 4px 0 20px;
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    &.dot-1 {
      background: #ffe5d8;
    }
    &.dot-2 {
      background: linear-gradient(90deg, #ff7c78, #fd9965);
    }
    &.dot-3 {
      background: #d8f1ef;
    }
    &.dot-4 {
      background: linear-gradient(90deg, #18c5b9, #19d0b2);
    }
    &.dot-5 {
      background: #e4f1ff;
    }
    &.dot-6 {
      background: linear-gradient(90deg, #4da1ff, #8dc3ff);
    }
  }
  .num {
    margin: 0px 6px 0 43px;
    font-size: 26px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #333333;
  }
}
.chart-box-t {
  position: relative;
  width: 100%;
  height: calc(100% - 27px);
  .chart-other {
    width: 100%;
    height: 100%;
  }
}
.select-box {
  position: absolute;
  left: 20px;
  top: 60px;
  border-radius: 5px;
  z-index: 999;
  /deep/ .el-input {
    width: 160px;
    height: 26px;
    height: 26px;
  }
  /deep/.el-cascader .el-input .el-input__inner {
    width: 160px;
    height: 26px;
    height: 26px;
    border: 1px solid #5889dc;

    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #446db3;
  }
  .el-cascader .el-input .el-input__inner::placeholder {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #446db3;
  }
  /deep/ .el-input__icon {
    height: auto;
  }
  /deep/ .el-icon-arrow-down:before {
    content: "";
    display: inline-block;
    width: 13px;
    height: 7px;
    background: url("~@img/project/icon-down.png") no-repeat;
  }
}
/*
  *常用电脑尺寸  1680 * 900
  *              1536 * 864
  *              1440 * 900
  *ipad pro      1366 * 1024
  *ipad mini     1024 * 768
  *ipad          1024 * 768
 */
/*分辨率低于1680，采用下面的样式*/
@media screen and (max-device-width: 1680px) {
  .m-box {
    width: 1500px;
    height: 880px;
    transform: scale(0.9);
    -moz-transform: scale(0.9);
    -webkit-transform: scale(0.9);
    -o-transform: scale(0.9);
    transform-origin: 0 0;
  }
}
/*分辨率低于1536，采用下面的样式*/
@media screen and (max-device-width: 1536px) {
  .m-box {
    width: 1500px;
    height: 880px;
    transform: scale(0.8);
    -moz-transform: scale(0.8);
    -webkit-transform: scale(0.8);
    -o-transform: scale(0.8);
    transform-origin: 0 0;
  }
}
/*分辨率低于1440，采用下面的样式*/
@media screen and (max-device-width: 1440px) {
  .m-box {
    width: 1460px;
    height: 1200px;
    transform: scale(0.74);
    -moz-transform: scale(0.74);
    -webkit-transform: scale(0.74);
    -o-transform: scale(0.74);
    transform-origin: 0 0;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr;
  }
}
/*分辨率低于1366，采用下面的样式*/
@media screen and (max-device-width: 1366px) {
  .m-box {
    width: 1460px;
    height: 1200px;
    transform: scale(0.74);
    -moz-transform: scale(0.74);
    -webkit-transform: scale(0.74);
    -o-transform: scale(0.74);
    transform-origin: 0 0;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr;
  }
}
/*分辨率低于1180，采用下面的样式*/
@media screen and (max-device-width: 1180px) {
  .m-box {
    width: 1200px;
    height: 930px;
    overflow: auto;
    grid-template-rows: 380px 380px 380px;
    grid-template-columns: 1fr 1fr;
  }
}
/*分辨率低于1024，采用下面的样式*/
@media screen and (max-device-width: 1024px) {
  .m-box {
    width: 1000px;
    height: 840px;
    overflow: auto;
    grid-template-rows: 380px 340px 340px;
    grid-template-columns: 1fr 1fr;
  }
}
</style>
